<script setup lang="ts">
import { onMounted, ref, watch } from 'vue'
import highcharts from 'highcharts/highcharts'
import highcharts3D from 'highcharts/highcharts-3d'
highcharts3D(highcharts)
const props = defineProps({
  option: Object,
  width: {
    type: String,
    default: '100%'
  },
  height: {
    type: String,
    default: '400px'
  }
})

const chartRef = ref(null)

const chartOptions = ref()
onMounted(() => {
  if (chartRef.value) {
    chartOptions.value = props.option
    highcharts.chart(chartRef.value, chartOptions.value)
  }
})


// 监听option变化重新设置图表
watch(
  () => props.option,
  (newOption) => {
    chartOptions.value = JSON.parse(JSON.stringify(props.option))
    chartRef.value && highcharts.chart(chartRef.value, chartOptions.value)
  },
  { deep: true }
)
</script>
<template>
  <div ref="chartRef" :style="{ width, height }"></div>
</template>
<style scoped>
/* 样式可以根据需要添加 */
</style>
